<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<div class="number">
					<div class="money base-flex">
						<div class="money-li" v-for="(item, index) in orderMoney" :key="index">
							<div class="title">
								{{ item.title }}
								<div class="money-li__icon" v-if="item.tips">
									<el-tooltip effect="dark" :content="item.tips" placement="top">
										<i class="el-icon-info"></i>
									</el-tooltip>
								</div>
							</div>
							<div class="num">{{ item.num }}</div>
						</div>
					</div>
				</div>
			</template>

			<template #slot-datepicker>
				<div>
					<span class="date-filter">
						<el-button
							class="btn"
							:class="{ dateChecked: isShow == 'today' }"
							@click="switchDate('today')"
							>今日</el-button
						>
						<el-button
							class="btn"
							:class="{ dateChecked: isShow == 'yesterday' }"
							@click="switchDate('yesterday')"
							>昨日</el-button
						>
						<el-button
							class="btn"
							:class="{ dateChecked: isShow == 'week' }"
							@click="switchDate('week')"
							>近7天</el-button
						>
						<el-button
							class="btn"
							:class="{ dateChecked: isShow == 'month' }"
							@click="switchDate('month')"
							>近30天</el-button
						>
					</span>

					<date-picker
						style="margin-left:10px"
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import moment from 'moment';
import { download } from '@/utils/index';
export default {
	data() {
		return {
			crud: null,
			updateBaiduIng: false,
			isShow: 'today',
			orderMoney: [
				{
					title: '浏览量(PV)',
					num: '',
					tips: '浏览量'
				},
				{
					title: '访客数(UV)',
					num: '',
					tips: '访客数'
				},
				{
					title: '有效订单',
					num: ''
				},
				{
					title: '转化率',
					num: ''
				}
			]
		};
	},
	components: {
		DatePicker
	},
	methods: {
		switchDate(date) {
			let startTime, endTime;
			this.isShow = date;
			switch (date) {
				case 'today':
					startTime = moment().format('YYYY-MM-DD');
					endTime = moment().format('YYYY-MM-DD');
					break;
				case 'yesterday':
					startTime = moment()
						.add(-1, 'days')
						.format('YYYY-MM-DD');
					endTime = moment()
						.add(-1, 'days')
						.format('YYYY-MM-DD');
					break;
				case 'week':
					startTime = moment()
						.add(-7, 'days')
						.format('YYYY-MM-DD');
					endTime = moment().format('YYYY-MM-DD');
					break;
				case 'month':
					startTime = moment()
						.add(-30, 'days')
						.format('YYYY-MM-DD');
					endTime = moment().format('YYYY-MM-DD');
					break;
			}

			this.refresh({ startTime: startTime, endTime: endTime });
		},
		toStamp(stamps) {
			return moment(stamps).format('YYYY-MM-DD HH:mm:ss');
		},

		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.baiduFlow.baiduFlow)
				.set('dict', {
					api: {
						page: 'flowStatisticsSelf'
					}
				})
				.set('table', {
					columns: [
						{
							label: '渠道标识',
							prop: 'channelId',
							align: 'center'
						},
						{
							label: '浏览量(PV)',
							prop: 'PV',
							align: 'center'
						},
						{
							label: '访客数(UV)',
							prop: 'UV',
							align: 'center'
						}
					],
					op: {
						visible: false
					}
				})

				.set('layout', [
					['slot-top-stats'],
					['refresh-btn', 'slot-datepicker', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params;
					const subData = await next(params);
					this.orderMoney[0].num = subData.PV || '0';
					this.orderMoney[1].num = subData.UV || '0';
					this.orderMoney[2].num = subData.validOrderNum || '0';
					this.orderMoney[3].num = subData.change || '0';
				})
				.done();

			app.refresh({
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59'),
				order: 'desc',
				prop: 'orderNum'
			});
		},
		refresh(params) {
			this.crud.refresh(params);
		}
	}
};
</script>
<style lang="scss" scoped>
.date-filter {
	margin-left: 10px;
	.btn {
		margin: 0;
		background: #fff;
		color: #888;
	}
}
.dateChecked {
	background: #4db7f3 !important;
	color: #fff !important;
}
.number {
	width: 100%;
	background: #ffffff;
	padding: 20px;
	border-radius: 8px;
	.money {
		display: flex;
		justify-content: space-around;
		.money-li {
			position: relative;
			.money-li-child {
				.num {
					color: $main-light;
					font-size: $font16;
					margin-top: 5px;
				}
				margin-top: 18px;
			}
			.money-li-child div:first-child {
				margin-right: 30px;
			}
			.title {
				color: $text-grey;
				font-size: $font12;
				display: flex;
				align-items: center;
				.money-li__icon {
					margin-left: 10px;
					font-size: 16px;
				}
			}
			.num {
				color: $main-light;
				font-size: $font22;
				font-weight: bold;
				margin-top: 6px;
			}
		}
	}
}
</style>
